<script setup lang="ts">
  import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { ref, h, reactive, computed } from 'vue';
  import eChart from '/@/components/e-chart.vue';

  const type = ref('station');
  const energyType = ref('electric');
  const date = ref('day');

  const expandedKeys = ref(['2']);
  const selectedKeys = ref([]);

  const stationTreeData = ref([
    {
      title: '监测站A',
      key: '1',
      children: [
        {
          title: '监测点1',
          key: '1-1',
        },
        {
          title: '监测点2',
          key: '1-2',
        },
      ],
    },
    {
      title: '监测站B',
      key: '2',
      children: [
        {
          title: '监测点3',
          key: '2-1',
        },
        {
          title: '监测点4',
          key: '2-2',
        },
      ],
    },
  ]);

  const unitTreeData = ref([
    {
      title: '组织单元1',
      key: '1',
      children: [
        {
          title: '监测点1',
          key: '1-1',
        },
        {
          title: '监测点2',
          key: '1-2',
        },
      ],
    },
    {
      title: '组织单元2',
      key: '2',
      children: [
        {
          title: '监测点3',
          key: '2-1',
        },
        {
          title: '监测点4',
          key: '2-2',
        },
      ],
    },
  ]);

  const columns = [
    { title: '时间', dataIndex: 'date', key: 'date', width: 120, align: 'center' },
    { title: '预测值', dataIndex: 'preValue', key: 'preValue', align: 'center' },
  ];

  const tableData = ref([
    {
      date: '2024-06-18',
      preValue: '1500kWh',
    },
    {
      date: '2024-06-19',
      preValue: '1600 kWh',
    },
  ]);

  const option = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          // name: 'Email',
          type: 'bar',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
      ],
    };
  });
</script>

<template>
  <div class="container">
    <a-row :gutter="16">
      <a-col :span="6">
        <a-card title="分析节点选择">
          <a-radio-group v-model:value="type" button-style="solid">
            <a-radio-button value="station">监测站树形结构</a-radio-button>
            <a-radio-button value="unit">组织单元树形结构</a-radio-button>
          </a-radio-group>

          <div class="tree">
            <a-tree :selectedKeys="selectedKeys" :defaultExpandAll="true" show-line :tree-data="stationTreeData" v-if="type == 'station'"></a-tree>

            <a-tree :selectedKeys="selectedKeys" :defaultExpandAll="true" show-line :tree-data="unitTreeData" v-if="type == 'unit'"></a-tree>
          </div>

          <div class="part">
            <span class="title">预测数据类型选择: </span>
            <a-radio-group v-model:value="energyType" button-style="solid">
              <a-radio-button value="electric">电能</a-radio-button>
              <a-radio-button value="water">水能</a-radio-button>
              <a-radio-button value="gas">气能</a-radio-button>
              <a-radio-button value="heat">热能</a-radio-button>
              <a-radio-button value="cold">冷能</a-radio-button>
            </a-radio-group>
          </div>

          <div class="part">
            <span class="title">预测模型选择: </span>
            <a-radio-group v-model:value="date" button-style="solid">
              <a-radio-button value="day">未来7天</a-radio-button>
              <a-radio-button value="month">当月</a-radio-button>
              <a-radio-button value="year">当年（以月为单位）</a-radio-button>
            </a-radio-group>
          </div>

          <a-button type="primary">生成预测</a-button>
        </a-card>
      </a-col>
      <a-col :span="18">
        <a-row :gutter="[0, 10]">
          <a-col :span="24">
            <div class="table">
              <a-card title="预测数据列表">
                <a-table :columns="columns" :data-source="tableData" rowKey="id"></a-table>
              </a-card>
            </div>
          </a-col>
          <a-col :span="24">
            <div class="table">
              <a-card title=" 预测柱状图">
                <div class="chart">
                  <eChart :option="option" name="option" />
                </div>
              </a-card>
            </div>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
  .ant-card {
    min-height: 1010px;
  }

  .tree {
    margin-top: 10px;
  }

  .part {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
  }
  .title {
    margin: 0 10px 10px 0;
  }

  button {
    margin: 20px 0;
  }

  .table {
    .ant-card {
      min-height: 500px;
    }
  }

  .chart {
    width: 100%;
    height: 400px;
  }
</style>
